<template>
  <div>
    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      layout="prev, pager, next, jumper"
      :total="total"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup>
  import { ref } from 'vue'
  const currentPage = ref(1) // 当前页码, 默认为1
  const pageSize = ref(6) // 每一页的数据个数
  const emits = defineEmits(['currentPageChange'])
  const props = defineProps({
    total: Number, // 数据总数
  })

  const handleCurrentChange = value => {
    emits('currentPageChange', value, pageSize.value)
  }

  defineExpose({
    currentPage,
  })
</script>
